<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			overflow: hidden;
		}
		.div div{
			width: 10px;
			height: 10px;
			background: red;
			border-radius: 50%;
			position: absolute;
			top: -10000px;
			left: -10000px;
			z-index: 0;
		}
		.div_2{
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 100;
			z-index: 999999999;
		}
		.div_2 div{
			width: 40px;
			height: 40px;
			background: rgb(20, 113, 189);
			border-radius: 50%;
			position: absolute;
		}
		.div_2 .boom{
			border-radius: 0%;
			background: #000;
		}
	</style>
</head>
<body>
	<div class="div_2">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="div">
		<div></div>
	</div>
	<script>
		let parent=document.querySelector(".div");
		let div_2=document.querySelectorAll(".div_2 div");
		let i=0,a=0,Points=0,speed=1000;
		let newdiv=document.createElement("div");
		//每隔固定一段时间生成一个点且随机位置颜色
		let generate=setInterval(() => {
			let newdiv=document.createElement("div")
			document.querySelector(".div_2").appendChild(newdiv)
			RandomLocation(newdiv);
		 move(newdiv)
			//达到一定数量时弹出游戏结束，并且终止随机生成
			if(document.querySelectorAll(".div_2 div").length>=100){
				clearInterval(generate);
				clearInterval(boom);
				alert("you die");
			}
		},speed);
		//没过.5秒有20%可能生成一个持续10秒的雷，吃到就暴毙
		let boom=setInterval(()=>{
			if(Math.random()<=.2){
				let boomDiv=document.createElement('div')
				boomDiv.classList.add('boom')
				RandomLocation(boomDiv)
				document.querySelector(".div_2").appendChild(boomDiv)
				gg(boomDiv)
				setTimeout(()=>{
					boomDiv.parentNode.removeChild(boomDiv)
				},10000)
			}
		},500)
		//启动时生成固定数量的点
		for(let i=0;i<div_2.length;i++){
			RandomLocation(div_2[i])
			move(div_2[i])
		}
		//随机位置颜色
		function RandomLocation(m){
			m.style.top=Math.round(Math.random()*(90 - 5 + 1) + 5)+"%";
			m.style.left=Math.round(Math.random()*(90 - 5 + 1) + 5)+"%";
			m.style.background=RandomColor();
		}
		//添加被鼠标经过时被吃掉的函数
		function move(m){
			m.addEventListener("mouseover",()=>{
				m.style.top=-100+"px";
				m.style.left=-100+"px";
				parent.appendChild(m);
				// 吃掉一个点加一分
				Points++;
				if(document.querySelectorAll(".div_2 div").length-document.querySelectorAll(".div_2 .boom").length==0){
					clearInterval(generate);
					clearInterval(boom);
					alert("you win")
				}
				// div_2[i].remove();
			})
		}
		//添加被鼠标经过时暴毙的函数
		function gg(m){
			m.addEventListener("mouseover",()=>{
				m.style.top=-100+"px";
				m.style.left=-100+"px";
				parent.appendChild(m);
				// 吃掉一个点加一分
				clearInterval(generate);
				clearInterval(boom);
				alert("you die")
			})
		}

		//一串点跟随鼠标效果
		document.body.addEventListener("mousemove",(e)=>{
			let div=document.querySelectorAll(".div div");
			if(i>=div.length){
				i=0;
			}
			//每10分变大1px
			div[i].style.width=10+Math.floor(Points/10)+"px"
			div[i].style.height=10+Math.floor(Points/10)+"px"
			div[i].style.left=e.clientX-Math.floor(div[i].offsetWidth/2)+"px";
			div[i].style.top=e.clientY-Math.floor(div[i].offsetHeight/2)+"px";
			div[i].style.background=RandomColor();
			div[i].style.zIndex=a;
			//吃越多速度越快
			speed-=Points/2
			speed=speed<=0?0:speed
			a++
			i++;
		})

		//随机颜色
		function RandomColor(){
			let color=["3","4","5","6","7","8","9","a","b","c","d","e"];
			let Rcolor="#";
			for(let i=0;i<3;i++){
				Rcolor+=color[Math.round(Math.random()*(color.length-1))];
			};
			return Rcolor;
		}
	</script>
</body>
</html>